﻿@{
    ViewBag.Title = "医生信息维护";
}
<style>
    div.k-edit-form-container {
        width: auto;
        -moz-min-width: 400px;
        -ms-min-width: 400px;
        -o-min-width: 400px;
        -webkit-min-width: 400px;
        min-width: 400px;
        max-width: 1800px;
    }

    div.k-window {
        width: 95%;
    }

    .k-edit-form-container .editor-label, .k-edit-label {
        width: 10%;
    }

    .k-edit-field, .k-edit-form-container .editor-field {
        width: 85%;
    }
</style>
<div id="grid"></div>
<script id="popup-editor" type="text/x-kendo-template">
    <div class="k-edit-label"><label for="DoctorName">医生姓名</label></div>
    <div class="k-edit-field"><input data-bind="value:DoctorName" required data-required-msg="请输入医生姓名" class="k-textbox" name="DoctorName" maxlength="50" /></div>
    <div class="k-edit-label"><label for="TitleImg">医生图片</label></div>
    <div class="k-edit-field">
        <img name="titImg" alt="" id="titImg" height="80" width="80" />
        <input type="file" name="Image" id="Image" style="width:200px" />
        <input type="hidden" name="TitleImg" id="TitleImg" data-bind="value:TitleImg" required data-required-msg="请选择标题图片" />
    </div>
    <div class="k-edit-label"><label for="Gender">医生性别</label></div>
    <div class="k-edit-field"><input data-bind="value:Gender" required data-required-msg="请输入医生性别" class="k-textbox" name="Gender" maxlength="50" /></div>
    <div class="k-edit-label"><label for="Title">医生职称</label></div>
    <div class="k-edit-field"><input data-bind="value:Title" required data-required-msg="请输入医生职称" class="k-textbox" name="Title" maxlength="50" /></div>
    <div class="k-edit-label"><label for="Desc">描述</label></div>
    <div class="k-edit-field"><textarea data-bind="value:Desc" required data-required-msg="请输入描述" cols="120" rows="10" id="Desc" name="Desc"></textarea></div>
    <div class="k-edit-label"><label for="SortNo">排序</label></div>
    <div class="k-edit-field"><input data-bind="value:SortNo" type="number" value="17" min="0" max="1000" step="1" id="SortNo" class="k-textbox" name="SortNo" maxlength="4" /></div>
    <div class="k-edit-label"><label for="IsShow">是否显示</label></div>
    <div class="k-edit-field"><input type="checkbox" style='opacity: initial;position: unset;left:  unset;z-index: unset;width: auto;height: auto;' data-bind="checked:IsShow" value="1" name="IsShow" /></div>
</script>
<script>
    jQuery(function () {
        $(".sidebar-menu li").removeClass("active");
        $("#doctor").addClass("active");
        var dataModel;
        var path = "@Url.Content("~/Upload/DoctorImages/")";
        var grid = jQuery("#grid").kendoGrid({
            "edit": function(e) {
                e.container.find("#Image").kendoUpload({
                    "success": onSuccess,
                    "select": onSelect,
                    "multiple": false,
                    "localization": {
                        "cancel": "取消",
                        "dropFilesHere": "拖拽要上传文件到此处",
                        "remove": "移除",
                        "retry": "重试",
                        "select": "选择...",
                        "statusFailed": "失败",
                        "statusUploaded": "已上传",
                        "statusUploading": "上传中",
                        "uploadSelectedFiles": "上传文件"
                    },
                    "async": {
                        "saveUrl": "@Url.Action("ImageSave", "Common")",
                        "autoUpload": true,
                        "removeUrl": "@Url.Action("ImageRemove", "Common")"
                    }
                });

                if (!e.model.isNew()) {
                    // Disable the editor of the "id" column when editing data items
                    var nameField = e.container.find("input[name='DoctorName']");
                    var name = nameField.val();
                    e.container.data("kendoWindow").title("编辑 " + name);
                    if (e.model.TitleImg) {
                        e.container.find("img#titImg").attr("src", path + e.model.TitleImg);
                    }
                } else {
                    e.container.data("kendoWindow").title("新增");
                }
                dataModel = e.model;
            },
            "columns": [
              {
                  "command": [{
                      "name": "edit",
                      "buttonType": "ImageAndText",
                      "text": {
                          "cancel": "取消",
                          "update": "更新",
                          "edit": "编辑"
                      }
                  },
                  {
                      "name": "destroy",
                      "buttonType": "ImageAndText",
                      "text": "删除"
                  }],
                  width: "180px"
              },
            {
                "title": "医生编号",
                "headerAttributes": {
                    "data-field": "DoctortNo",
                    "data-title": "医生编号"
                },
                "field": "DoctortNo",
                "filterable": {
                    "cell": {
                        "showOperators": false,
                        "operator": "contains"
                    }
                },
                width: "120px",
                "encoded": true
            },
            {
                "title": "医生名称",
                "headerAttributes": {
                    "data-field": "DoctorName",
                    "data-title": "医生名称"
                },
                "field": "DoctorName",
                "filterable": {
                    "cell": {
                        "showOperators": false,
                        "operator": "contains"
                    }
                },
                width: "120px",
                "encoded": true
            },
            {
                "title": "科室名称",
                "headerAttributes": {
                    "data-field": "DepartName",
                    "data-title": "科室名称"
                },
                "field": "DepartName",
                "filterable": {
                    "cell": {
                        "showOperators": false,
                        "operator": "contains"
                    }
                },
                width: "120px",
                "encoded": true
            },
           {
               "title": "医生性别",
               "headerAttributes": {
                   "data-field": "Gender",
                   "data-title": "医生性别"
               },
               "field": "Gender",
               "filterable": false,
               "template": '<strong>#: Gender =="F" ?"男":"女" # </strong>',
               width: "80px",
               "encoded": true
           },
            {
                "title": "医生职称",
                "headerAttributes": {
                    "data-field": "Title",
                    "data-title": "医生职称"
                },
                "field": "Title",
                "filterable": {
                    "cell": {
                        "showOperators": false,
                        "operator": "eq"
                    }
                },
                width: "150px",
                "encoded": true
            },
            {
                "title": "描述",
                "headerAttributes": {
                    "data-field": "Desc",
                    "data-title": "描述"
                },
                "hidden": true,
                "field": "Desc",
                "filterable": {
                    "cell": {
                        "showOperators": false,
                        "operator": "contains"
                    }
                },
                width: "120px",
                "encoded": true
            },
            {
                "title": "医生排序",
                "headerAttributes": {
                    "data-field": "SortNo",
                    "data-title": "科室排序号"
                },
                "field": "SortNo",
                "filterable": false,
                width: "80px",
                "encoded": true
            },
            {
                "title": "是否显示",
                "headerAttributes": {
                    "data-field": "IsShow",
                    "data-title": "是否显示"
                },
                "field": "IsShow",
                "filterable": false,
                "template": '<strong>#: IsShow == 1?"是":"否" # </strong>',
                width: "80px",
                "encoded": true
            },
            {
                "title": "创建时间",
                "headerAttributes": {
                    "data-field": "CreateTime",
                    "data-title": "创建时间"
                },
                "field": "CreateTime",
                "format": "{0:yyyy/MM/dd}",
                "filterable": {
                    "cell": {
                        "showOperators": false,
                        "operator": "gte"
                    }
                },
                width: "120px",
                "encoded": true
            },
            {
                "title": "更新时间",
                "headerAttributes": {
                    "data-field": "ModifiedTime",
                    "data-title": "更新时间"
                },
                "field": "ModifiedTime",
                "format": "{0:yyyy/MM/dd}",
                "filterable": {
                    "cell": {
                        "showOperators": false,
                        "operator": "gte"
                    }
                },
                width: "120px",
                "encoded": true
            }],
            //"toolbar": [{ "name": "create", "text": "新增", "buttonType": "ImageAndText" }],
            "editable": { "mode": "popup", "template": kendo.template($("#popup-editor").html()), "window": { resizable: true }, "confirmation": true, "confirmDelete": "确定要删除吗？" },
            "pageable": {
                "buttonCount": 10,
                "messages": {
                    "display": "显示条目 {0} - {1} 共 {2}",
                    "empty": "没有可显示的记录。",
                    "page": "页",
                    "of": "共 {0}",
                    "first": "首页",
                    "previous": "前页",
                    "next": "后页",
                    "last": "末页",
                    "refresh": "刷新",
                    "morePages": "更多页"
                }
            },
            "sortable": true,
            "filterable": {
                "mode": "row"
            },
            "scrollable": {
                "height": "200px"
            },
            "messages": {
                "noRecords": "没有可用的记录。"
            },
            "dataSource": {
                "type": (function () {
                    if (kendo.data.transports['aspnetmvc-ajax']) {
                        return 'aspnetmvc-ajax';
                    } else {
                        throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                    }
                })(),
                "transport": {
                    "read": {
                        "url": "@Url.Action("Doctors_Read", "Grid")"
                    },
                    //"create": {
                    //    "url": + "/Grid/Doctor_Create"
                    //},
                    "update": {
                        "url":  "@Url.Action("Doctor_Update", "Grid")"
                    },
                    "destroy": {
                        "url": "@Url.Action("Doctor_Destroy", "Grid")"
                    },
                    "idField": "Id",
                    "prefix": ""
                },
                "pageSize": 20,
                "page": 1,
                "total": 0,
                "serverPaging": true,
                "serverSorting": true,
                "serverFiltering": true,
                "serverGrouping": true,
                "serverAggregates": true,
                "filter": [],
                "schema": {
                    "data": "Data",
                    "total": "Total",
                    "errors": "Errors",
                    "model": {
                        "id": "Id",
                        "fields": {
                            "Id": {
                                "type": "number"
                            },
                            "DoctorName": {
                                "type": "string"
                            },
                            "DoctortNo": {
                                "type": "string"
                            },
                            "Desc": {
                                "type": "string"
                            },
                            "DepartName": {
                                "type": "string"
                            },
                            "TitleImg": {
                                "type": "string" 
                            },
                            "SortNo": {
                                "type": "number",
                                "defaultValue": null
                            },
                            "IsShow": {
                                "type": "number",
                                "defaultValue": null
                            },
                            "CreateTime": {
                                "type": "date"
                            },
                            "ModifiedTime": {
                                "type": "date",
                                "defaultValue": null
                            }
                        }
                    }
                }
            }
        });

        function onSelect(e) {
            $.map(e.files, function (file) {
                var extension = file.extension;

                if (!(extension == ".jpg" || extension == ".jpeg" || extension == ".gif" || extension == ".png" || extension == ".bmp")) {
                    alert("请选择图片文件上传");
                    e.preventDefault();
                }
            });
        }
        function onSuccess(e) {
            // Array with information about the uploaded files
            var response = e.response;
            if (e.operation == "upload") {
                $("#titImg").attr("src", path + response.fileName);
                $("#TitleImg").val(response.fileName);
                dataModel.set("TitleImg", response.fileName);
            } else if (e.operation == "remove") {
                $("#titImg").attr("src", "");
                $("#TitleImg").val("");
                dataModel.set("TitleImg", "");
            }
        }
    });

</script>
